<template>
<div id="mains">
    <header-tab title="个人中心"/>
    <footer-tab/>

    <div id="contents">
        <header class="u-header">
            <img src="http://hiphotos.qianqian.com/ting/pic/item/eac4b74543a9822659d378408982b9014a90eb43.jpg" alt="pic" />
            <h2 class="user-title">
				<span style="font-size: 15px;">用户名：</span> 
				{{ $store.state.user.username }}
			</h2>
			<ul class="u-info clearfix">
				<li v-if="$store.state.user.isAdmin">超级管理员</li>
				<li v-else>普通会员</li>
				<li><a href="/admin" target="_blank">后台管理</a></li>
			</ul>
            <p class="u-state">
                <span>登录状态:</span>
                在线 &nbsp;&nbsp;
                <a href="javascript:;" @click="handleLoginOut">退出登录</a>
            </p>
        </header>

        <div class="app-body">
            <ul>
                <li v-for="item in 5" :key="item">
					<router-link tag="h3" to="/classify/weibo">充值中心 - {{item}}</router-link>
                    <i class="fa fa-chevron-right"></i>
                </li>
            </ul>
        </div> 
        
        <footer class="login-box">
            <a href="javascript:;" @click="handleLogin">登录</a>
            <a href="javascript:;" @click="handleRegister">注册</a>
        </footer>
    </div>
</div>
</template>

<script>
const HeaderTab = () => import("@/components/HeaderTab")
const FooterTab = () => import("@/components/FooterTab")
export default {
    name: "center",
    components: {
        HeaderTab,
        FooterTab
    },
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 组件内的守卫（局部守卫）
    beforeRouteEnter (to, from, next) {
        if(to.meta.requireAuth) {
            if(localStorage.getItem("token")) {
                next(vm => {
					vm.axios.get("/user/getUserInfo").then(res => {
						if(res.data.status === 200) {
							localStorage.setItem("username", res.data.code.username)
							localStorage.setItem("isAdmin", res.data.code.isAdmin)
							vm.$store.commit("user/GETUSERINFO", {
								username: res.data.code.username,
								isAdmin: res.data.code.isAdmin,
							})
						} else if(res.data.status === 302) {
							alert(res.data.code)
							vm.$store.commit("user/GETUSERINFO", {
								username: '',
								isAdmin: false
							})
							localStorage.removeItem("token")
							vm.$router.push("/mine/login")
						}
					})
                })
            } else {
                next("/mine/login")
            }
        } else {
            next()
        }
    },

    methods: {
        // 注册
        handleRegister() {
            this.$router.push("/mine/register")
        },

        // 退出
        handleLoginOut() {
			this.axios.get("/user/logout").then(res => {
				if(res.data.status === 200) {
					localStorage.removeItem("username")
					localStorage.removeItem("isAdmin")
					localStorage.removeItem("token")
					this.$store.commit("user/GETUSERINFO", {
						username: '',
						isAdmin: false
					})
					this.$router.push("/mine/login")
				}
			})
        },
        // 登录
        handleLogin() {
            this.$router.push("/mine/login")
        }
    },
}
</script>

<style scoped>
#contents {
    margin-bottom: 0;
    box-shadow: 0 -5px 10px #bfbfbf;
}	
#contents .u-header {
	display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
	min-height: 200px;
	margin: 10px 8px 0;
	padding: 8px;
	font-size: 16px;
	border: 1px solid #eee;
	border-radius: 5px;
	background-color: #eee;
	box-shadow: 0 0 6px #999;
}
#contents .u-header img {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

#contents .u-header .user-title {
	margin: 5px 0;
}

#contents .u-info li {
	float: left;
}
#contents .u-info li:first-of-type {
	color: red;
}
#contents .u-info li:last-of-type {
	color: #09f995;
	margin-left: 8px;
}

#contents .u-state {
	margin-top: 8px;
}

.app-body {
	border: 1px solid #eee;
	background-color: #eee;
	box-shadow: 0 0 6px #999;
	border-radius: 5px;
	padding: 5px 15px;
	margin: 10px 8px 50px;
}

.app-body li {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px 8px;
	border-bottom: 1px solid #999;
}
.app-body li:last-child {
	border-bottom: 0;
}
.app-body li h3 {
	font-size: 15px;
	color: red;
}

#contents .login-box {
    position: relative;
    bottom: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 40px;
	margin: 8px;
    padding-left: 25px;
	padding-right: 25px;
    border: 1px solid #a8f0fd;
	background-color: #a8f0fd;
	border-radius: 5px;
	box-shadow: 0 0 6px #999;
}
</style>